<!DOCTYPE html>
<html lang="zh-cn">

<head><title>
    使用 Hugo 制作博客 | 
    
    ZZY2357 的博客</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="description" content="Hugo 是一个由 Golang 编写的超快的静态博客生成器。下面来看看如何使用 Hugo 制作一个属于自己的博客吧！
安装 使用 snap snap install hugo --channel=extended # 包括安装 Sass 等的拓展 新建博客 hugo new site my-blog # “my-blog”可以换成任意名字 cd my-blog 编写内容 hugo new posts/hello.md # 新建一篇博客文章 # vim ./content/posts/hello.md echo &#39;# Hello!&#39; &gt; ./content/posts/hello.md # 写入内容 添加主题  安装  这个时候博客还是不能预览，需要添加主题。这里我们以 Ananke 主题为例
git init # 初始化 git 仓库，为了将主题以 git 子模块的方式添加 git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke # 将主题以 git 子模块的方式添加到 themes 文件夹里；如果 git clone 慢，可以试试 Gitee 导入 Github仓库的方式  切换主题  编辑 config.
    ">


<meta property="og:title" content="使用 Hugo 制作博客" />
<meta property="og:description" content="Hugo 是一个由 Golang 编写的超快的静态博客生成器。下面来看看如何使用 Hugo 制作一个属于自己的博客吧！
安装 使用 snap snap install hugo --channel=extended # 包括安装 Sass 等的拓展 新建博客 hugo new site my-blog # “my-blog”可以换成任意名字 cd my-blog 编写内容 hugo new posts/hello.md # 新建一篇博客文章 # vim ./content/posts/hello.md echo &#39;# Hello!&#39; &gt; ./content/posts/hello.md # 写入内容 添加主题  安装  这个时候博客还是不能预览，需要添加主题。这里我们以 Ananke 主题为例
git init # 初始化 git 仓库，为了将主题以 git 子模块的方式添加 git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke # 将主题以 git 子模块的方式添加到 themes 文件夹里；如果 git clone 慢，可以试试 Gitee 导入 Github仓库的方式  切换主题  编辑 config." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://zzy2357.gitee.io/posts/make-a-blog-with-hugo/" />
<meta property="article:published_time" content="2020-06-13T12:34:54+08:00" />
<meta property="article:modified_time" content="2020-06-13T12:34:54+08:00" />

<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="使用 Hugo 制作博客"/>
<meta name="twitter:description" content="Hugo 是一个由 Golang 编写的超快的静态博客生成器。下面来看看如何使用 Hugo 制作一个属于自己的博客吧！
安装 使用 snap snap install hugo --channel=extended # 包括安装 Sass 等的拓展 新建博客 hugo new site my-blog # “my-blog”可以换成任意名字 cd my-blog 编写内容 hugo new posts/hello.md # 新建一篇博客文章 # vim ./content/posts/hello.md echo &#39;# Hello!&#39; &gt; ./content/posts/hello.md # 写入内容 添加主题  安装  这个时候博客还是不能预览，需要添加主题。这里我们以 Ananke 主题为例
git init # 初始化 git 仓库，为了将主题以 git 子模块的方式添加 git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke # 将主题以 git 子模块的方式添加到 themes 文件夹里；如果 git clone 慢，可以试试 Gitee 导入 Github仓库的方式  切换主题  编辑 config."/>

<meta itemprop="name" content="使用 Hugo 制作博客">
<meta itemprop="description" content="Hugo 是一个由 Golang 编写的超快的静态博客生成器。下面来看看如何使用 Hugo 制作一个属于自己的博客吧！
安装 使用 snap snap install hugo --channel=extended # 包括安装 Sass 等的拓展 新建博客 hugo new site my-blog # “my-blog”可以换成任意名字 cd my-blog 编写内容 hugo new posts/hello.md # 新建一篇博客文章 # vim ./content/posts/hello.md echo &#39;# Hello!&#39; &gt; ./content/posts/hello.md # 写入内容 添加主题  安装  这个时候博客还是不能预览，需要添加主题。这里我们以 Ananke 主题为例
git init # 初始化 git 仓库，为了将主题以 git 子模块的方式添加 git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke # 将主题以 git 子模块的方式添加到 themes 文件夹里；如果 git clone 慢，可以试试 Gitee 导入 Github仓库的方式  切换主题  编辑 config.">
<meta itemprop="datePublished" content="2020-06-13T12:34:54&#43;08:00" />
<meta itemprop="dateModified" content="2020-06-13T12:34:54&#43;08:00" />
<meta itemprop="wordCount" content="103">



<meta itemprop="keywords" content="hugo,markdown,blog," />
<link rel="canonical" href="https://zzy2357.gitee.io/posts/make-a-blog-with-hugo/" />

<link rel="icon" type="image/png" href="https://zzy2357.gitee.io/image/favicon.ico">

<link rel="stylesheet" href="/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/bulma.min.css">





<script src=/js/ramium.js></script>
<link rel="stylesheet" href=/css/ramium.css>





</head>

<body><nav class="navbar is-dark" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href=/>
      
      <strong>ZZY2357 的博客 </strong>
      
    </a>

    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
      data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      
      
      <a class="navbar-item" href="/">主页</a>
      
      
      
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">博客</a>
        <div class="navbar-dropdown">
          
          <a class="navbar-item" href="/tags/">所有标签</a>
          
          <a class="navbar-item" href="/posts/">所有文章</a>
          
        </div>
      </div>
      
      
      
      <a class="navbar-item" href="/about/">关于</a>
      
      
      
      <a class="navbar-item" href="/index.xml">RSS</a>
      
      
    </div>

    <div class="navbar-end">
      
      <a class="navbar-item navgithub" href="https://github.com/zzy2357" target="_blank">
        <i class="fa fa-github fa-2x"></i>
      </a>
      

      
    </div>
  </div>
</nav><div class="columns is-centered">
        <div id="page-body" class="column is-7">

<div class="content blog">
    <h1>使用 Hugo 制作博客</h1>

    <div id="infobar" class="level is-mobile">
        <div class="level-left">
            
            <div class="level-item">
                <p class="subtitle info date">Jun 13, 2020
                </p>
            </div>
            

            <div class="level-item">
                <p class="subtitle info">
                    2 mins read
                </p>
            </div>
        </div>
        <div class="level-right is-hidden-touch">
            <div class="tags">
                
                <a class="tag is-dark is-rounded" href="/tags/hugo">Hugo</a>
                
                <a class="tag is-dark is-rounded" href="/tags/markdown">Markdown</a>
                
                <a class="tag is-dark is-rounded" href="/tags/blog">Blog</a>
                
            </div>
        </div>
    </div>

    <div class="tags is-hidden-desktop">
        
        <a class="tag is-dark is-rounded" href="/tags/hugo">Hugo</a>
        
        <a class="tag is-dark is-rounded" href="/tags/markdown">Markdown</a>
        
        <a class="tag is-dark is-rounded" href="/tags/blog">Blog</a>
        
    </div>

    <div class="blog-text">
        

        <p>Hugo 是一个由 Golang 编写的超快的静态博客生成器。下面来看看如何使用 Hugo 制作一个属于自己的博客吧！</p>
<h2 id="安装">安装</h2>
<h3 id="使用-snap">使用 snap</h3>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-sh" data-lang="sh">snap install hugo --channel<span style="color:#f92672">=</span>extended <span style="color:#75715e"># 包括安装 Sass 等的拓展</span>
</code></pre></div><h3 id="新建博客">新建博客</h3>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-sh" data-lang="sh">hugo new site my-blog <span style="color:#75715e"># “my-blog”可以换成任意名字</span>
cd my-blog
</code></pre></div><h3 id="编写内容">编写内容</h3>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-sh" data-lang="sh">hugo new posts/hello.md <span style="color:#75715e"># 新建一篇博客文章</span>
<span style="color:#75715e"># vim ./content/posts/hello.md</span>
echo <span style="color:#e6db74">&#39;# Hello!&#39;</span> &gt; ./content/posts/hello.md <span style="color:#75715e"># 写入内容</span>
</code></pre></div><h3 id="添加主题">添加主题</h3>
<ul>
<li>安装</li>
</ul>
<p>这个时候博客还是不能预览，需要添加主题。这里我们以 Ananke 主题为例</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-sh" data-lang="sh">git init <span style="color:#75715e"># 初始化 git 仓库，为了将主题以 git 子模块的方式添加</span>
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke <span style="color:#75715e"># 将主题以 git 子模块的方式添加到 themes 文件夹里；如果 git clone 慢，可以试试 Gitee 导入 Github仓库的方式</span>
</code></pre></div><ul>
<li>切换主题</li>
</ul>
<p>编辑 <code>config.toml</code>，这是 Hugo 的配置文件，加入这一行：</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-toml" data-lang="toml"><span style="color:#a6e22e">theme</span> = <span style="color:#e6db74">&#34;ananke&#34;</span>
</code></pre></div><h2 id="预览">预览</h2>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-sh" data-lang="sh">hugo server -D <span style="color:#75715e"># “-D” 指的是开发模式，即“draft”为 true 的文章也会被显示出来</span>
<span style="color:#75715e"># 或者 hugo server 查看最终的效果</span>
</code></pre></div><p>默认，预览的端口是 <code>1313</code>，但如果端口被占用了，Hugo 会另外分配一个端口，注意查看 Hugo 的输出</p>
<p><img src="https://i.loli.net/2020/06/13/WoV7vbXG5ksNgBK.png" alt="image.png"></p>
<h2 id="构建">构建</h2>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-sh" data-lang="sh">hugo -D
</code></pre></div><h2 id="成功">成功！😆</h2>

    </div>
</div><div id="social-media-share" class="has-text-centered">
	<p><i>Sharing is caring!</i></p>
	<br>
	
	<div class="share-buttons">
	    <a  href="https://www.facebook.com/sharer/sharer.php?u=https%3a%2f%2fzzy2357.gitee.io%2fposts%2fmake-a-blog-with-hugo%2f"
	        onclick="socialMediaPopUp(this.href, '', 500, 500); return false;"
	        title="Share on Facebook. Opens in a new window.">
	        <img src=/img/icons/45px/facebook.png>
	    </a>

	    <a  href="https://twitter.com/intent/tweet?text=%e4%bd%bf%e7%94%a8%20Hugo%20%e5%88%b6%e4%bd%9c%e5%8d%9a%e5%ae%a2&url=https%3a%2f%2fzzy2357.gitee.io%2fposts%2fmake-a-blog-with-hugo%2f"
	        onclick="socialMediaPopUp(this.href, '', 500, 500); return false;"
	        title="Share on Twitter. Opens in a new window." >
	        <img src=/img/icons/45px/twitter.png>
	    </a>

		<a  href="http://www.reddit.com/submit?url=https%3a%2f%2fzzy2357.gitee.io%2fposts%2fmake-a-blog-with-hugo%2f"
	        onclick="socialMediaPopUp(this.href, '', 900, 500); return false;"
	        title="Share on Reddit. Opens in a new window." >
	        <img src=/img/icons/45px/reddit.png>
	    </a>

	    <a  href="http://pinterest.com/pin/create/button/?url=https%3a%2f%2fzzy2357.gitee.io%2fposts%2fmake-a-blog-with-hugo%2f"
	        onclick="socialMediaPopUp(this.href, '', 900, 500); return false;"
	        title="Share on Pinterest. Opens in a new window." >
	        <img src=/img/icons/45px/pinterest.png>
	    </a>

	    <a  href="http://www.tumblr.com/share/link?url=https%3a%2f%2fzzy2357.gitee.io%2fposts%2fmake-a-blog-with-hugo%2f"
	        onclick="socialMediaPopUp(this.href, '', 900, 500); return false;"
	        title="Share on Tumblr. Opens in a new window." >
	        <img src=/img/icons/45px/tumblr.png>
	    </a>

		<a  href="https://www.linkedin.com/shareArticle?mini=true&url=https%3a%2f%2fzzy2357.gitee.io%2fposts%2fmake-a-blog-with-hugo%2f
			&title=%e4%bd%bf%e7%94%a8%20Hugo%20%e5%88%b6%e4%bd%9c%e5%8d%9a%e5%ae%a2&summary=Hugo%20%e6%98%af%e4%b8%80%e4%b8%aa%e7%94%b1%20Golang%20%e7%bc%96%e5%86%99%e7%9a%84%e8%b6%85%e5%bf%ab%e7%9a%84%e9%9d%99%e6%80%81%e5%8d%9a%e5%ae%a2%e7%94%9f%e6%88%90%e5%99%a8%e3%80%82%e4%b8%8b%e9%9d%a2%e6%9d%a5%e7%9c%8b%e7%9c%8b%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8%20Hugo%20%e5%88%b6%e4%bd%9c%e4%b8%80%e4%b8%aa%e5%b1%9e%e4%ba%8e%e8%87%aa%e5%b7%b1%e7%9a%84%e5%8d%9a%e5%ae%a2%e5%90%a7%ef%bc%81%0a%e5%ae%89%e8%a3%85%20%e4%bd%bf%e7%94%a8%20snap%20snap%20install%20hugo%20--channel%3dextended%20%23%20%e5%8c%85%e6%8b%ac%e5%ae%89%e8%a3%85%20Sass%20%e7%ad%89%e7%9a%84%e6%8b%93%e5%b1%95%20%e6%96%b0%e5%bb%ba%e5%8d%9a%e5%ae%a2%20hugo%20new%20site%20my-blog%20%23%20%e2%80%9cmy-blog%e2%80%9d%e5%8f%af%e4%bb%a5%e6%8d%a2%e6%88%90%e4%bb%bb%e6%84%8f%e5%90%8d%e5%ad%97%20cd%20my-blog%20%e7%bc%96%e5%86%99%e5%86%85%e5%ae%b9%20hugo%20new%20posts%2fhello.md%20%23%20%e6%96%b0%e5%bb%ba%e4%b8%80%e7%af%87%e5%8d%9a%e5%ae%a2%e6%96%87%e7%ab%a0%20%23%20vim%20.%2fcontent%2fposts%2fhello.md%20echo%20%26%2339%3b%23%20Hello%21%26%2339%3b%20%26gt%3b%20.%2fcontent%2fposts%2fhello.md%20%23%20%e5%86%99%e5%85%a5%e5%86%85%e5%ae%b9%20%e6%b7%bb%e5%8a%a0%e4%b8%bb%e9%a2%98%20%20%e5%ae%89%e8%a3%85%20%20%e8%bf%99%e4%b8%aa%e6%97%b6%e5%80%99%e5%8d%9a%e5%ae%a2%e8%bf%98%e6%98%af%e4%b8%8d%e8%83%bd%e9%a2%84%e8%a7%88%ef%bc%8c%e9%9c%80%e8%a6%81%e6%b7%bb%e5%8a%a0%e4%b8%bb%e9%a2%98%e3%80%82%e8%bf%99%e9%87%8c%e6%88%91%e4%bb%ac%e4%bb%a5%20Ananke%20%e4%b8%bb%e9%a2%98%e4%b8%ba%e4%be%8b%0agit%20init%20%23%20%e5%88%9d%e5%a7%8b%e5%8c%96%20git%20%e4%bb%93%e5%ba%93%ef%bc%8c%e4%b8%ba%e4%ba%86%e5%b0%86%e4%b8%bb%e9%a2%98%e4%bb%a5%20git%20%e5%ad%90%e6%a8%a1%e5%9d%97%e7%9a%84%e6%96%b9%e5%bc%8f%e6%b7%bb%e5%8a%a0%20git%20submodule%20add%20https%3a%2f%2fgithub.com%2fbudparr%2fgohugo-theme-ananke.git%20themes%2fananke%20%23%20%e5%b0%86%e4%b8%bb%e9%a2%98%e4%bb%a5%20git%20%e5%ad%90%e6%a8%a1%e5%9d%97%e7%9a%84%e6%96%b9%e5%bc%8f%e6%b7%bb%e5%8a%a0%e5%88%b0%20themes%20%e6%96%87%e4%bb%b6%e5%a4%b9%e9%87%8c%ef%bc%9b%e5%a6%82%e6%9e%9c%20git%20clone%20%e6%85%a2%ef%bc%8c%e5%8f%af%e4%bb%a5%e8%af%95%e8%af%95%20Gitee%20%e5%af%bc%e5%85%a5%20Github%e4%bb%93%e5%ba%93%e7%9a%84%e6%96%b9%e5%bc%8f%20%20%e5%88%87%e6%8d%a2%e4%b8%bb%e9%a2%98%20%20%e7%bc%96%e8%be%91%20config.&source=rafed123.github.io"
	        onclick="socialMediaPopUp(this.href, '', 900, 500); return false;"
	        title="Share on LinkedIn. Opens in a new window." >
	        <img src=/img/icons/45px/linkedin.png>
	    </a>

	    <a  href="mailto:?subject=%e4%bd%bf%e7%94%a8%20Hugo%20%e5%88%b6%e4%bd%9c%e5%8d%9a%e5%ae%a2&amp;body=Check out this site https%3a%2f%2fzzy2357.gitee.io%2fposts%2fmake-a-blog-with-hugo%2f"
	        title="Share via Email. Opens in a new window." >
	        <img src=/img/icons/45px/mail.png>
	    </a>
	</div>
</div>


<br>
<div id="disqus_thread"></div>
<script type="text/javascript">
    (function () {
        
        
        if (window.location.hostname == "localhost")
            return;

        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        var disqus_shortname = '';
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>


        </div>
    </div>

<footer class="footer has-background-dark">
    <div class="content has-text-centered has-text-white">
        <p>
            © 2020 Ramium. Powered by
            <a class="has-text-light" href="https://github.com/gohugoio/hugo" target="_blank">
            Hugo</a>. Theme
            <a class="has-text-light" href="https://github.com/rafed123/ramium/" target="_blank">
                Ramium.
            </a>
        </p>
    </div>
</footer>
</body>

</html>